<template>
	<view class="login-container">
		<!-- 页面头部 -->
		<view class="login-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">欢迎回来</text>
			<text class="subtitle">登录您的账户以继续</text>
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<view class="form-item">
				<view class="input-wrapper">
					<image class="input-icon" src="/static/Dl/手机.png"></image>
					<input class="form-input" type="text" placeholder="请输入手机号" v-model="formData.phone" maxlength="11"
						placeholder-style="color: #cccccc;" />
				</view>
			</view>

			<view class="form-item">
				<view class="input-wrapper">
					<image class="input-icon" src="/static/Dl/密码 .png"></image>
					<input class="form-input" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码"
						v-model="formData.password" placeholder-style="color: #cccccc;" />
					<image class="eye-icon" :src="showPassword ? '/static/Dl/睁眼.png' : '/static/Dl/闭眼.png'"
						@tap="togglePassword" mode="aspectFit"></image>
				</view>
			</view>

			<view class="form-item form-action">
				<button class="login-btn" @tap="handleLogin" :disabled="isLoginLoading">
					<template v-if="isLoginLoading">登录中...</template>
					<template v-else>登录</template>
				</button>
			</view>

			<view class="form-options">
				<text class="option-link" @tap="toRegister">新用户注册</text>
				<text class="option-link" @tap="toForgotPassword">忘记密码？</text>
			</view>
		</view>
		<!-- 协议勾选（移到微信登录下方） -->
		<view class="agreement">
			<label class="checkbox-wrapper">
				<checkbox class="agree-checkbox" :checked="agreed" @tap.stop="toggleAgreement"></checkbox>
				<text class="agreement-text">我已阅读并同意</text>
				<text class="link" @tap="toProtocol('user')">《用户协议》</text>
				<text class="agreement-text">和</text>
				<text class="link" @tap="toProtocol('privacy')">《隐私政策》</text>
			</label>
		</view>

		<!-- 第三方登录 + 协议勾选（整体下移，逻辑连贯） -->
		<view class="third-party-and-agreement">
			<!-- 第三方登录 -->
			<view class="third-party-login">
				<view class="divider">
					<view class="line"></view>
					<text class="text">其他登录方式</text>
					<view class="line"></view>
				</view>
				<view class="third-party-icons">
					<view class="icon-wrapper" @tap="wechatLogin">
						<image class="third-party-icon" src="/static/Dl/微信登录.png" mode="aspectFit"></image>
						<text class="icon-label">微信</text>
					</view>
				</view>
			</view>

		
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'

	// 表单数据类型定义
	interface FormData {
		phone : string
		password : string
	}

	// 1. 基础状态管理
	const formData = ref<FormData>({ phone: '', password: '' })
	const showPassword = ref(false) // 密码显示状态
	const agreed = ref(false) // 协议同意状态
	const isLoginLoading = ref(false) // 登录加载状态
	const hasAgreedProtocol = ref(false) // 本地存储的同意状态

	// 2. 页面加载时读取协议同意状态（首次进入自动弹出）
	onMounted(() => {
		console.log('登录页面加载完成')

		// 读取本地存储：是否已同意协议
		uni.getStorage({
			key: 'hasAgreedProtocol',
			success: (res) => {
				hasAgreedProtocol.value = res.data
			},
			fail: () => {
				agreed.value = false // 未存储过=未同意，不默认勾选
			},
			complete: () => {
				// 首次进入且未同意 → 自动弹出协议提示
				if (!hasAgreedProtocol.value) {
					uni.showModal({
						title: '重要提示',
						content: '请阅读并同意《用户协议》和《隐私政策》以继续使用服务',
						showCancel: false, // 强制查看，不可关闭
						confirmText: '前往查看',
						success: () => {
							toProtocol('all') // 跳转到全部协议页
						}
					})
				}
			}
		})
	})

	// 3. 密码显示切换
	const togglePassword = () => {
		showPassword.value = !showPassword.value
	}

	// 4. 协议同意状态切换（勾选/取消勾选）
	const toggleAgreement = () => {
		agreed.value = !agreed.value
		// 同意时存储状态到本地
		if (agreed.value) {
			uni.setStorage({
				key: 'hasAgreedProtocol',
				data: true,
				success: () => {
					console.log('协议同意状态已保存')
				}
			})
		}
	}

	// 5. 跳转到协议详情页（支持单独查看用户协议/隐私政策）
	const toProtocol = (type : 'user' | 'privacy' | 'all') => {
		uni.navigateTo({
			url: `/pages/Dl/agreement?type=${type}`
		})
	}

	// 6. 登录逻辑（核心：未同意协议则拦截）
	const handleLogin = async () => {
		// 防止重复提交
		if (isLoginLoading.value) return

		// 拦截：未同意协议
		if (!agreed.value) {
			uni.showModal({
				title: '请先同意协议',
				content: '为保障您的权益，请阅读并同意《用户协议》和《隐私政策》',
				confirmText: '去同意',
				cancelText: '稍后',
				success: (res) => {
					if (res.confirm) {
						toProtocol('all') // 跳转协议页
					}
				}
			})
			return
		}

		// 手机号校验
		if (!/^1[3-9]\d{9}$/.test(formData.value.phone.trim())) {
			uni.showToast({
				title: '请输入11位有效手机号',
				icon: 'none',
				duration: 1500
			})
			return
		}

		// 密码校验
		const password = formData.value.password.trim()
		if (password.length < 6 || password.length > 20) {
			uni.showToast({
				title: '密码长度需在6-20位之间',
				icon: 'none',
				duration: 1500
			})
			return
		}

		// 模拟登录请求
		try {
			isLoginLoading.value = true
			await new Promise((resolve) => setTimeout(resolve, 1500))

			// 登录成功：跳转到首页
			uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 })
			setTimeout(() => {
				uni.switchTab({ url: '/pages/tabbar/index' })
			}, 1000)
		} catch (error) {
			uni.showToast({ title: '登录失败，请重试', icon: 'none' })
			console.error('登录失败：', error)
		} finally {
			isLoginLoading.value = false
		}
	}

	// 7. 微信登录逻辑
	const wechatLogin = () => {
		// 拦截：未同意协议
		if (!agreed.value) {
			uni.showModal({
				title: '请先同意协议',
				content: '为保障您的权益，请阅读并同意《用户协议》和《隐私政策》',
				confirmText: '去同意',
				cancelText: '稍后',
				success: (res) => {
					if (res.confirm) {
						toProtocol('all')
					}
				}
			})
			return
		}

		// 跳转到微信一键登录页面
		  uni.navigateTo({
		    url: '/pages/Dl/wechat-auth'
		  })
		}
		
	

	// 8. 其他跳转逻辑
	const toRegister = () => {
		uni.navigateTo({ url: '/pages/Dl/register' })
	}

	const toForgotPassword = () => {
		uni.navigateTo({ url: '/pages/Dl/forgot-password' })
	}
</script>

<style lang="css" scoped>
	.login-container {
		padding: 0 30rpx;
		background-color: #ffffff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 120rpx;
		margin-bottom: 80rpx;
	}

	.login-header .logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 30rpx;
	}

	.login-header .title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.login-header .subtitle {
		font-size: 28rpx;
		color: #999999;
	}

	.login-form {
		margin-bottom: 60rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		padding: 0 30rpx;
	}

	.input-wrapper .input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.input-wrapper .form-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		color: #333333;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.input-wrapper .eye-icon {
		width: 40rpx;
		height: 40rpx;
		cursor: pointer;
	}

	.form-action {
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}

	.login-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(90deg, #ff6b35, #fd091f);
		border-radius: 50rpx;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
	}

	.login-btn:active {
		opacity: 0.8;
	}

	.login-btn:disabled {
		background: #fd091f;
		opacity: 0.8;
	}

	.form-options {
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.form-options .option-link {
		color: #fd091f;
		font-size: 28rpx;
		cursor: pointer;
	}

	/* 第三方登录 + 协议区域 容器 */
	.third-party-and-agreement {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
	}

	/* 第三方登录样式 */
	.third-party-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.third-party-login .divider {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 30rpx;
	}

	.third-party-login .divider .line {
		flex: 1;
		height: 1rpx;
		background-color: #e0e0e0;
	}

	.third-party-login .divider .text {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.third-party-icons {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.third-party-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.icon-label {
		font-size: 24rpx;
		color: #666666;
	}

	/* 协议勾选区域 */
	.agreement {
		margin-top: 40rpx; /* 与微信登录的间距 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
	}

	.agreement .checkbox-wrapper {
		display: flex;
		align-items: center;
	}

	.agreement .agree-checkbox {
		transform: scale(0.8);
		margin-right: 8rpx;
	}

	.agreement .agreement-text {
		margin: 0 5rpx;
	}

	.agreement .link {
		color: #fd091f;
		cursor: pointer;
	}
</style>